<template>
  <div class="container">
      <swiper :options="swiperOption">
        <!-- slides -->
        <swiper-slide v-for="(icon,index) in pages" :key="index" class="iconcontainer"> 
          <div v-for="item in icon" :key="icon.id" class="type">
            <figure>
              <img :src="item.imgUrl">
              <figcaption>{{item.desc}}</figcaption>
            </figure>
          </div>
        </swiper-slide>
      </swiper>
  </div>
</template>

<script>
import App from '../../../App.vue';
export default {
  components: { App },
  name: "HomeIcons",
  props:{
    iconList:Array
  },
  data() {
    return {
      swiperOption: {
        pagination: ".swiper-pagination",
      },
    };
  },
  computed:{
    pages(){
      let iconArr=[];
      let length = this.iconList.length
      
      for(let i=0,j=0;i<length;i+=8,j++){
        iconArr[j]=this.iconList.splice(0,8);
      }
    return iconArr
    }
  }
};
</script>

<style lang="scss" scoped>
@import '~styles/minin';
.container {
  overflow: hidden;
  height: 0;
  width: 100%;
  padding-bottom: 50%;
  background-color: #fff;
}
.iconcontainer{
  display: flex;
  flex-wrap: wrap;
  .type{
    width: 25%;
    padding: 0.1rem 0rem;
    @include fj(center);
    figure{
				img{
					margin-bottom: 0.3rem;
					@include wh(1.1rem, 1.1rem);
				}
				figcaption{
					text-align: center;
					@include sc(0.24rem, #666);
				}
			}
  }
}
</style>